(function (win) {
    function Base () {
        document.onmousedown = function (e) {
            e = e || event;
            var dir = "",  //设置好方向
                obj = e.target,
                firstX = e.clientX,
                firstY = e.clientY,
                width = obj.offsetWidth,
                height = obj.offsetHeight,
                Left = obj.offsetLeft,
                Top = obj.offsetTop,
                disx = firstX - Left,
                disy = firstY - Top;
            //下一步判断方向距离左边的距离+元素的宽度减去自己设定的宽度，只要点击的时候大于在这个区间，他就算右边
            if (firstX > Left + width - 30) {
                dir = "right";
            } else if (firstX < Left + 30) {
                dir = "left";
            }
            if (firstY > Top + height - 30) {
                dir = "down";
            } else if (firstY < Top + 30) {
                dir = "top";
            }
            //判断方向结束
            document.onmousemove = function (e) {
                e = e || event;
                switch (dir) {
                    case "right":
                        obj.style["width"] = width + (e.clientX - firstX) + "px";
                        break;
                    case "left":
                        obj.style["width"] = width - (e.clientX - firstX) + "px";
                        obj.style["left"] = Left + (e.clientX - firstX) + "px";
                        break;
                    case "top":
                        obj.style["height"] = height - (e.clientY - firstY) + "px";
                        obj.style["top"] = Top + (e.clientY - firstY) + "px";
                        break;
                    case "down":
                        obj.style["height"] = height + (e.clientY - firstY) + "px";
                        break;
                    //获取x和y
                    default:
                        var nx = e.clientX;
                        var ny = e.clientY;
                        var nl = nx - disx;
                        var nt = ny - disy;
                        obj.style.left = nl + 'px';
                        obj.style.top = nt + 'px';
                }

            }
            obj.onmouseup = function () {
                document.onmousemove = null;
            }
            
            obj.oncontextmenu = function (e) {
                var x = e.clientX,
                    y = e.clientY;
                var ul = document.createElement("ul"),
                    li = document.createElement("li");
                ul.setAttribute("id", 'menu')
                li.textContent = "新增"
                ul.appendChild(li)
                // 构建一个容器
                ul.style.cssText = "position:absolute;z-index:1111;top:"+y+"px;left:"+x+"px;border:1px solid #f00"
                obj.appendChild(ul)
                return false;
            }
            return false;
        }
    }

    Base.prototype = {
        constructor: Base,
        getById (id) {
            return document.getElementById(id)
        }
    }
    win.Base = new Base();
})(window)